<template>
  <div>
    <el-row style="width: 92%;margin: 20px auto">
      <el-col>
        <el-form labelPosition="left" inline class="demo-table-expand">

          <el-form-item label="箱子编号：">
            <span>{{zxInfo.boxnumber}}</span>
          </el-form-item>
          <el-form-item label="箱子 ID：">
            <span>{{zxInfo.boxid}}</span>
          </el-form-item>
          <el-form-item label="箱子名称：">
            <span>{{zxInfo.boxname}}</span>
          </el-form-item>
          <el-form-item label="所属自提点：">
            <span>{{zxInfo.pickname}}</span>
          </el-form-item>
          <el-form-item>
            <span><el-button style="background:rgb(102, 122, 123);color:#fff" @click="showzxing=true">订单装箱</el-button></span>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="zxingList" v-loading="loading" style="width: 92%;margin: 20px auto">
      <el-table-column prop="hash.ordernumber" label="订单号" sortable>
      </el-table-column>
      <el-table-column prop="hash.amount" label="金额" sortable>
      </el-table-column>
      <el-table-column prop="hash.number" label="数量" sortable>
      </el-table-column>
      <el-table-column prop="hash.remarks" label="备注">
      </el-table-column>
      <el-table-column prop="hash.paytime" label="付款时间" sortable>
      </el-table-column>
    </el-table>
    <el-dialog
      title="订单装箱"
      :visible.sync="showzxing"
      width="40%"
    >
      <el-form labelWidth="100px">
        <el-form-item label="订单编号">
          <el-input v-model="ordernumber" clearable onkeyup="this.value=this.value.replace(/[^\d]/g,'') " maxlength="18"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showzxing = false">取 消</el-button>
        <el-button type="primary" @click="doZxing">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showzxing: false,
      ts: this.newStore(),
      zxingList: [],
      zxInfo: {},
      ordernumber: '',
    };
  },
  created() {
    this.getxzInfo();
    this.getzxingList();
  },
  methods: {
    doZxing() {
      if (this.ordernumber == '') {
        this.$alert('请输入订单编号', '提示', {
          confirmButtonText: '确定',
        });
        return;
      }
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142FACD949D49EDB086320BAB54695513D9097ED6FFA46F33FC',
        boxnumber: this.$route.query.boxnumber,
        ordernumber: this.ordernumber,
      };
      this.spost(this.ts, '/mainservlet', req).then(() => {
        this.$message({
          message: '装箱成功！',
          type: 'success',
        });
        this.getzxingList();
        this.showzxing = false;
      });
    },
    getxzInfo() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142FACD949D49EDB0867992CFB4365D7F69',
        boxnumber: this.$route.query.boxnumber,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        [this.zxInfo] = [ts.d.data.operation1[0].hash];
        console.log(this.zxInfo);
      });
    },
    getzxingList() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D1A69241F4EE7E9C62BFF0B9210751F692',
        boxnumber: this.$route.query.boxnumber,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.zxingList = ts.d.data.operation1;
        for (let i = 0; i < this.zxingList.length; i += 1) {
          this.zxingList[i].hash.paytime = `${new Date(this.zxingList[i].hash.paytime * 1000).toLocaleDateString().replace(/\//g, '-')} ${new Date(this.zxingList[i].hash.paytime * 1000).toTimeString().substr(0, 8)}`;
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
  .el-row
    background #Fff
    padding 10px
  .demo-table-expand
    font-size: 0;
  .demo-table-expand label
    width: 90px;
    color: #99a9bf;
  .demo-table-expand .el-form-item
    margin-right: 0;
    margin-bottom: 0;
    width: 50%
</style>
